<template>
  <el-tabs v-model="activeName" class="demo-tabs">
    <el-tab-pane :label="$t('用户总览')" name="first">
      <el-card>
        <div class="flex items-center justify-start">
          <div class="flex flex-col items-start flex-1">
            <div class="text-2xl">
              {{ $t("用户数量") }}
            </div>
            <div class="mt-2 text-2xl">
              {{ numberToCurrencyNo(walletData.total) }}
            </div>
          </div>
          <div class="flex flex-col items-start flex-1 ml-10">
            <div class="text-2xl">
              {{ $t("用户接收总数量") }}
            </div>
            <div class="mt-2 text-2xl">
              {{ numberToCurrencyNo(walletData.total) }}
            </div>
          </div>
          <div class="flex flex-col items-start flex-1 ml-10">
            <div class="text-2xl">
              {{ $t("用户发送总数量") }}
            </div>
            <div class="mt-2 text-2xl">
              {{ numberToCurrencyNo(walletData.total) }}
            </div>
          </div>
        </div>
      </el-card>
      <h3 class="my-4">{{ $t("用户列表") }}</h3>
      <el-table :data="userList" v-loading="loading">
        <el-table-column
          prop="bill_no"
          :label="$t('用户ID')"
          align="center"
          width="250"
        />
        <el-table-column align="center" prop="amount" :label="$t('可用数量')" />
        <el-table-column align="center" prop="amount" :label="$t('冻结数量')" />
        <el-table-column align="center" prop="amount" :label="$t('接收数量')" />
        <el-table-column align="center" prop="amount" :label="$t('发送数量')" />
        <el-table-column
          align="center"
          fixed="right"
          :label="$t('操作')"
          width="200"
        >
          <template #default="scope">
            <el-button
              round
              icon="MoreFilled"
              class="cursor-pointer"
              @click="showCurrentDetail(scope)"
              >{{ $t("查看") }}</el-button
            >
            <el-button
              round
              class="cursor-pointer"
              @click="showCurrentDetail(scope)"
              >{{ $t("转入") }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>
    <el-tab-pane :label="$t('交易订单')" name="second">
      <Records />
    </el-tab-pane>
    <el-tab-pane :label="$t('待审核')" name="three">
      <template #label>
        <el-badge :value="2" class="item" :max="99">
          <p>{{ $t("待审核") }}</p>
        </el-badge>
      </template>
      <Records />
    </el-tab-pane>
  </el-tabs>
</template>
<script setup>
// 引入组件
import Records from "./records.vue";

import { ref, reactive } from "vue";
import { useUserStore } from "@/store/modules/user";
import { getWalletHomeNewApi } from "@/api/wallet/index";
import { numberToCurrencyNo } from "@/utils/utils";
import { ElMessage } from "element-plus";
import router from "../../router";
const activeName = ref("first");
const userList = ref([
  {
    bill_no: "123456789",
    amount: 1000,
  },
]);
const loading = ref(false);

let walletData = reactive({
  total: 0,
  list: [],
  assets_unit: "$",
});

const showCurrentDetail = (scope) => {
  router.push("/wallet/userBalance/detail");
};
</script>
<style lang="scss">
.walletHeaderCont {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
